<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" width="1000" top="100px" destroy-on-close
		@closed="$emit('closed')">
		<div class="demo-collapse" v-if="channelList.length">
			<el-collapse v-model="activeNames" @change="handleChange">
				<el-collapse-item :title="'通道'+item.channelId+' ('+item.name+')'" :name="index" v-for="(item,index) in channelList" :key="index">
					<div>
						<el-checkbox-group v-model="item.functions" @change="handleCheckedCitiesChange($event,index)">
							<el-checkbox :label="item.value" v-for="(item,index) in tagList" :key="index">{{item.label}}</el-checkbox>
						</el-checkbox-group>
					</div>
				</el-collapse-item>
			</el-collapse>
		</div>
		<div v-else>
			<el-empty description="暂无通道"></el-empty>
		</div>
		<template #footer v-if="channelList.length">
			<el-button @click="visible=false">返 回</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>
<script>
	export default {
		emits: ['success', 'closed'],
		data() {
			return {
				activeNames: [0],
				mode: "add",
				titleMap: {
					add: '功能配置',
					edit: '编辑',
					show: '查看'
				},
				visible: false,
				isSaveing: false,
				channelList: [],
				//表单数据
				FormData: {
					store: {},
					sn: '',
					devStatus: true,
					functions: ''
				},
				tagList:[
					{
						label:'目标抓拍',
						value:'[target]'
					},
					{
						label:'越线检测',
						value:'[0]'
					},
					{
						label:'入侵检测',
						value:'[1]'
					},
					{
						label:'徘徊检测',
						value:'[2]'
					},
					{
						label:'遗留检测',
						value:'[3]'
					},
					{
						label:'移走检测',
						value:'[4]'
					},
					{
						label:'区域进入',
						value:'[5]'
					},
					{
						label:'区域离开',
						value:'[6]'
					},
					{
						label:'过线统计',
						value:'[line]'
					},
					{
						label:'人群密度',
						value:'[density]'
					},
					{
						label:'离岗检测',
						value:'[quit]'
					},
					{
						label:'排队长度',
						value:'[lineup]'
					},
					{
						label:'热区分析',
						value:'[region]'
					},
					{
						label:'热度图',
						value:'[heat]'
					}
				],
				//验证规则
				rules: {
					store: [{
						required: true,
						message: '请选择店面'
					}],
					sn: [{
						required: true,
						message: '请填写SN'
					}],
					name: [{
						required: true,
						message: '请填写设备名称'
					}],
					identify: [{
						required: true,
						message: '请填写唯一标识'
					}],
					functions: [{
						required: true,
						message: '请填写相机功能'
					}],
					devStatus: [{
						required: true,
						message: '请选择状态'
					}],
				},
				unitList: [],
				userInfo: {},
				functions: ''
			}
		},
		created() {

		},
		mounted() {},
		methods: {
			handleCheckedCitiesChange() {},
			//新增等级
			addLevel() {
				let index = String(this.channelList.length + 1)
				if (this.channelList.length == 24) {
					this.$message('最多只能新增24个通道！')
				} else {
					this.channelList.push({
						name: index,
						tag: '通道' + index,
					})
				}
			},
			// 删除等级
			deleteLevel(item, index) {
				this.channelList.splice(index, 1)
			},
			//显示
			open(mode = 'add') {
				this.mode = mode;
				this.visible = true;
				return this
			},
			//表单提交方法
			async submit() {
				// var valid = await this.$refs.dialogForm.validate().catch(() => {})
				// if (!valid) {
				// 	return false
				// }
				this.isSaveing = true

				let data = []
				// if (this.FormData.id) {
				// 	data.id = this.FormData.id
				// }
				if (this.channelList.length) {
					this.channelList.forEach(item => {
						let func = ''
						if(item.functions && item.functions.length){
							func = item.functions.join(',')
						}
						data.push({
							id:item.id,
							type:'channel',
							func:func
						})
					})
				}
				data.channels = this.channelList
				const res = await this.$API.api.cam.func.post(data)
				this.isSaveing = false;
				if (res.code == 200) {
					this.$emit('success', this.FormData, this.mode)
					this.visible = false;
					this.$message.success("操作成功")
				} else {
					this.$alert(res.message, "提示", {
						type: 'error'
					})
				}
			},
			//表单注入数据
			setData(data) {
				this.FormData.id = data.id
				this.FormData.name = data.name
				this.FormData.store.name = data.store.name
				this.FormData.store.id = data.store.id
				this.FormData.identify = data.identify
				this.FormData.sn = data.sn
				this.FormData.functions = data.functions
				this.FormData.devStatus = data.devStatus
				if (data.channels && data.channels.length > 0) {
					data.channels.forEach(item => {
						let func = []
						if(item.functions){
							func = item.functions.split(",")
						}
						this.channelList.push({
							id: item.id,
							channelId: item.channelId,
							name: item.name,
							functions: func
						})
					})
					console.log(data.channels)
				}
				//可以和上面一样单个注入，也可以像下面一样直接合并进去
				//Object.assign(this.FormData, data)
			}
		}
	}
</script>

<style>
</style>
